<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>绿餐桌</title>
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		<!--header start -->
		<header class="mui-bar mui-bar-nav main-color FFF">
			<a class="mui-btn mui-btn-link mui-btn-nav mui-pull-left mui-action-back">
				<span class="mui-icon mui-icon-left-nav"></span>绿餐桌
			</a>
		</header>
		<!--header End -->

		<!--content start -->
		<div class="mui-content">
			<!--个人积分 start-->
			<div class="item-tab font12 FFFback">
				<div class="center item-name item-price">
					<a class="mui-media mui-col-xs-6 fl mui-text-center active" href="javascript:void(0)">推荐菜品
					<a class="mui-media mui-col-xs-6 fl mui-text-center" href="javascript:void(0)">最新菜品</a>
				</div>
				<!--tab0 start -->
				<div class="item current FFFback">
					<!--推荐菜品 start-->
					<div class="item-tab margin10 FFFback">
						<div class="mui-table-view-cell item-price greenLike">
							<i class="fa fa-heart"></i>
							<a href="greenTableItem.html" title="">
								<img src="images/greenTable_02.jpg" alt="">
								<div class="onlineaAtivity padding10">
									<div class="mui-media mui-col-xs-9 fl mui-text-left font12">紅油耳片</div>

									<div class="mui-media mui-col-xs-3 fl font12 right">
										<i class="fa fa-eye font14 font6b"></i>123
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="item-tab margin10 FFFback">
						<div class="mui-table-view-cell item-price greenLike">
							<i class="fa fa-heart color"></i>
							<a href="greenTableItem.html" title="">
								<img src="images/greenTable_02.jpg" alt="">
								<div class="onlineaAtivity padding10">
									<div class="mui-media mui-col-xs-9 fl mui-text-left font12">紅油耳片</div>

									<div class="mui-media mui-col-xs-3 fl font12 right">
										<i class="fa fa-eye font14 font6b"></i>123
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
				<!--推荐菜品 End-->

				<!--tab1 start -->
				<div class="item">
					<!--最新菜品 start-->
					<div class="item-tab margin10 FFFback">
						<div class="mui-table-view-cell item-price greenLike">
							<i class="fa fa-heart"></i>
							<a href="greenTableItem.html" title="">
								<img src="images/greenTable_02.jpg" alt="">
								<div class="onlineaAtivity padding10">
									<div class="mui-media mui-col-xs-9 fl mui-text-left font12">紅油耳片</div>

									<div class="mui-media mui-col-xs-3 fl font12 right">
										<i class="fa fa-eye font14 font6b"></i>123
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="item-tab margin10 FFFback">
						<div class="mui-table-view-cell item-price greenLike">
							<i class="fa fa-heart color"></i>
							<a href="greenTableItem.html" title="">
								<img src="images/onlineActivity.jpg" alt="">
								<div class="onlineaAtivity padding10">
									<div class="mui-media mui-col-xs-9 fl mui-text-left font12">紅油耳片</div>

									<div class="mui-media mui-col-xs-3 fl font12 right">
										<i class="fa fa-eye font14 font6b"></i>123
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
				<!--最新菜品 End-->
			</div>
		</div>

		<!--footer start-->
		<footer>
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item" href="shop-child.html">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">商城</span>
				</a>
				<a class="mui-tab-item mui-active" href="nav.html">
					<span class="mui-icon mui-icon-phone"></span>
					<span class="mui-tab-label">小时达</span>
				</a>

				<a class="mui-tab-item" href="community.html">
					<span class="mui-icon mui-icon-chat"></span>
					<span class="mui-tab-label">绿肺社区</span>
				</a>

				<a class="mui-tab-item" href="myCenter.html">
					<span class="mui-icon mui-icon-person"></span>
					<span class="mui-tab-label">个人中心</span>
				</a>
			</nav>
		</footer>
		<!--footer End-->

		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script>
			 //tab
			$(function() {
				$(".item").hide();
				$(".item.current").show();
				$(".item-name a").each(function() {
					$(this).click(function() {
						var index = $(this).index();
						$(this).addClass("active");
						$(this).parent().siblings(".item").eq(index).show()
							.siblings(".item").hide();
					});
				});
			});
			 //like
			$(function() {
				$(".greenLike>i").click(function() {
					if ($(this).hasClass("color")) {
						$(this).removeClass("color")
					} else {
						$(this).addClass("color");
					}
				});
			});
		</script>
	</body>

</html>